<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
</head>
<body onload="disconnect()">
<div>
	<div>
		<button id="connect" onclick="connect();">连接</button>
		<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
	</div>
	<div id="conversationDiv">
		<label>输入你的名字</label><input type="text" id="name" />
		<button id="sendName" onclick="sendName();">发送</button>
		<p id="response"></p>
	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="text/javascript" src="stomp.js"></script>
<script type="text/javascript">
	var stompClient = null;

	function setConnected(connected) {
		document.getElementById('connect').disabled = connected;
		document.getElementById('disconnect').disabled = !connected;
		document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
		$('#response').html();
	}

	function connect() {
		var socket = new SockJS('/endpointWisely'); //1
		stompClient = Stomp.over(socket);//2
		stompClient.connect({}, function(frame) {//3
			setConnected(true);
			console.log('开始进行连接Connected: ' + frame);
			stompClient.subscribe('/topic/getResponse', function(respnose){ //4
				showResponse(JSON.parse(respnose.body).responseMessage);
			});
		});
	}


	function disconnect() {
		if (stompClient != null) {
			stompClient.disconnect();
		}
		setConnected(false);
		console.log("Disconnected");
	}

	function sendName() {
		var name = $('#name').val();
		stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//5
	}

	function showResponse(message) {
		var response = $("#response");
		response.html(message);
	}
</script>
</body>
</html>